﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
      <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />
    <link href="../assets/css/custom-styles.css" rel="stylesheet" />
    <link href="../assets/css/dataTables.bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div id="wrapper">
        <div id="page-wrapper">
            <div id="page-inner">
			 <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-header">
                            <i class="fa fa-dashboard">&nbsp;</i>栏目管理 <small>栏目列表</small>
                        </h1>
                    </div>
                </div> 
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                             <button class="btn btn-success btn-lg" data-toggle="modal" data-target="#saveModal">
                              	添加栏目
                            </button>
                        </div>
                        <!-- 弹出层(添加/编辑) -->
                        <div class="modal fade" id="saveModal" tabindex="-1" role="dialog" aria-labelledby="saveModalLabel" aria-hidden="true">
                                <div class="modal-dialog"  style="width:648px;">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="saveModalLabel" style="font-weight: bolder;">添加/修改栏目</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="form-group input-group">
	                                            <span class="input-group-addon">栏目名称：<font style="color:red;margin-left:5px;">*</font></span>
	                                            <input type="text" id="id" hidden="hidden">
	                                            <input type="text" id="name" class="form-control" placeholder="请输入栏目名称" maxlength="10">
	                                        </div>
	                                        <div class="form-group input-group" id="sortdiv">
	                                            <span class="input-group-addon">排&nbsp;&nbsp;序：<font style="color:red;margin-left:5px;">*</font></span>
	                                            <input type="text" id="sort" class="form-control" placeholder="请输入排序" maxlength="2" onkeyup="value=value.replace(/[^\d]/g,'')">
	                                        </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                            <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                         <!-- 弹出层（删除） -->
                         <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" data-id="" aria-labelledby="myModalLabel" aria-hidden="true">
						    <div class="modal-dialog">
						        <div class="modal-content">
						            <div class="modal-body">
						            	<input tyle="text" id="delid" value="" hidden="hidden">
						                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						                	你确认要删除么？
						            </div>
						            <div class="modal-footer">
						                <button type="button" class="btn btn-primary" id="deleteid" onclick="doDel()">确认</button>
						                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						            </div>
						        </div>
						    </div>
						</div>
						<!-- 弹出层（添加下一级栏目） -->
                         <div class="modal fade" id="saveDownModal" tabindex="-1" role="dialog" aria-labelledby="saveDownModalLabel" aria-hidden="true">
                                <div class="modal-dialog"  style="width:648px;">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="saveDownModalLabel" style="font-weight: bolder;">添加下级栏目</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="form-group input-group">
	                                            <span class="input-group-addon">栏目名称：<font style="color:red;margin-left:5px;">*</font></span>
	                                            <input type="text" id="pid" hidden="hidden">
	                                            <input type="text" id="downname" class="form-control" placeholder="请输入栏目名称" maxlength="10">
	                                        </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                            <button type="button" class="btn btn-primary" onclick="saveDwon()">保存</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
						<!-- 数据table -->
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example" >
                                    <thead>
                                    	<tr>
                                    		<td>序号</td>
                                    		<td>栏目名称</td>
                                    		<td>主栏目排序</td>
                                    		<td>栏目等级</td>
                                    		<td>操作</td>
                                    	</tr>
                                    </thead>
                                    <tbody id="tree_table_body">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
            </div>
    <script src="../assets/js/jquery-1.10.2.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/jquery.metisMenu.js"></script>
    <script src="../assets/js/dataTables/jquery.dataTables.min.js"></script>
    <script src="../assets/js/dataTables/dataTables.bootstrap4.js"></script>
    <script src="../js/user.js"></script>
        <script>
            $(document).ready(function () {
            	var tree_table_body = $("#tree_table_body");
            	
            	var req_url = req_user+"/menu/queryMenu";
            	var data = req_ajax(req_url,{});
            	console.info(data);
            	if(data && data.data){
            		if(data.flag == 1){
            			var body_html = "";
            			var xh = 0;
            			for (var i = 0; i < data.data.length; i++) {
            				if(data.data[i].pid == 0){
            					var addNextHtml = "&nbsp;<button class='btn btn-info btn-sm' data-toggle='modal' data-target='#saveDownModal' style='font-weight:bold;' data-id='"+data.data[i].id+"'>添加下一级栏目</button>";
            					var editHtml="&nbsp;<button class='btn btn-success btn-sm' data-toggle='modal' data-target='#saveModal' style='background-color:#7D7DFF;font-weight:bold;' data-id='"+data.data[i].id+"'  data-pid='"+data.data[i].pid+"'>编辑</button>";
                                var delHtml="&nbsp;<button class='btn btn-warning btn-sm' data-toggle='modal' data-target='#deleteModal' style='font-weight:bold;'  data-id='"+data.data[i].id+"'>删除</button>";
                                
            					xh++;
            					body_html +="<tr><td>"+xh+"</td><td>"+data.data[i].name+"</td><td>"+data.data[i].sort+"</td><td>"+data.data[i].type+"级栏目</td><td>"+addNextHtml+editHtml+delHtml+"</td></tr>";
            					var re_json = append_next(data.data[i].id,data.data,xh);
            					body_html += re_json.n_html;
            					xh = re_json.xh;
            					
            					$("#sort").val(data.data[i].sort+1);
            				}
    					}
            			console.info(body_html);
            			tree_table_body.append(body_html);
            		}
            	}
            });
            
            //通过上级找到全部下一级
            function append_next(up_data_id,data,xh){
            	var re_result = {};
            	var n_html = "";
            	for (var i = 0; i < data.length; i++) {
					if(data[i].pid == up_data_id){
						var addNextHtml = "&nbsp;<button class='btn btn-info btn-sm' data-toggle='modal' data-target='#saveDownModal' style='font-weight:bold;' data-id='"+data[i].id+"'>添加下一级栏目</button>";
    					var editHtml="&nbsp;<button class='btn btn-success btn-sm' data-toggle='modal' data-target='#saveModal' style='background-color:#7D7DFF;font-weight:bold;' data-id='"+data[i].id+"' data-pid='"+data[i].pid+"'>编辑</button>";
                        var delHtml="&nbsp;<button class='btn btn-warning btn-sm' data-toggle='modal' data-target='#deleteModal' style='font-weight:bold;'  data-id='"+data[i].id+"'>删除</button>";
                        
						xh++;
						n_html +="<tr><td>"+xh+"</td><td style='padding-left:"+data[i].type*30+"px;'>"+data[i].name+"</td><td></td><td>"+data[i].type+"级栏目</td><td>"+addNextHtml+editHtml+delHtml+"</td></tr>";
						var re_json = append_next(data[i].id,data,xh);
						n_html += re_json.n_html;
						xh = re_json.xh;
					}
				}
            	re_result['n_html'] = n_html;
            	re_result['xh'] = xh;
            	return re_result;
            }
            
          //点击删除按钮时，给弹出层绑定对应的id值
           $('#deleteModal').on('show.bs.modal', function (event) {
               var button = $(event.relatedTarget); // 触发事件的按钮
               var id = button.data('id'); // 解析出data-id内容
               $('#delid').val(id);
           });
          
          //点击审核按钮时，给弹出层绑定对应的id值
          $('#auditModal').on('show.bs.modal', function (event) {
              var button = $(event.relatedTarget); // 触发事件的按钮
              var id = button.data('id');//解析出data-id内容
              $('#auditid').val(id);
          });
          
          
          
          
            //点击编辑按钮时，给弹出层绑定对应的id值
           	$('#saveModal').on('show.bs.modal', function (event) {
          		  cleanShowModel();
                  var button = $(event.relatedTarget); // 触发事件的按钮
                  var id = button.data('id'); //解析出data-id内容
                  var pid = button.data('pid'); //解析出data-id内容
                  if(pid && pid != 0){
                	  $("#sortdiv").hide();
                  }else{
                	  $("#sortdiv").show();
                  }
                  //初始化角色下拉框
                  if(id){//编辑
	               	   $("#id").val(id);
	               	   var reqURL = req_user+"/menu/queryMenu";
	               	   var param = {};
	               	   param["id"] = id;
	                   var data = req_ajax(reqURL,param);
	               	   if(data){
	               		   $("#id").val(data.data[0].id);
	               		   $("#name").val(data.data[0].name);
	               		   $("#pid").val(data.data[0].pid);
	               		   if(data.data[0].sort){
	               			 $("#sort").val(data.data[0].sort);
	               		   }
	               	   }
                  }
              });
            
           	$('#saveDownModal').on('show.bs.modal', function (event) {
          	  var button = $(event.relatedTarget); // 触发事件的按钮
                var id = button.data('id');//解析出data-id内容
                $('#pid').val(id);
            });
            
          	//保存下级栏目按钮点击事件
            function saveDwon(){
            	var param = {};
            	param["pid"]=$("#pid").val();
            	param["name"]=$("#downname").val();
            	
            	var url = req_user+"/menu/saveMenu";
            	var data = req_ajax(url,param);
            	console.info(data);
            	if(data.flag == 1){
            		window.location.reload();
            	}else{
            		alert(data.message);
            	}
            }
            
            //删除操作
            function doDel(){
            	var id = $('#delid').val();
            	var paramjson = {};
            	paramjson["id"] = id;
            	var reqURL = req_user+"/menu/deleteMenu";
            	var data = req_ajax(reqURL,paramjson);
            	if(data.flag == 1){
            		window.location.reload();
            	}
            }
            
            //保存按钮点击事件
            function save(){
            	var param = {};
            	param["id"]=$("#id").val();
            	param["name"]=$("#name").val();
            	param["sort"]=$("#sort").val();
            	
            	var url = req_user+"/menu/saveMenu";
            	var data = req_ajax(url,param);
            	console.info(data);
            	if(data.flag == 1){
            		window.location.reload();
            	}
            }
            
            //清空弹出层内所有控件内容
            function cleanShowModel(){
               $("#id").val("");
     		   $("#name").val("");
     		   $("#type").val("");
            }
    </script>
    <script src="../assets/js/custom-scripts.js"></script>
    
	<script src="../../common/cookie.js"></script>
	<script src="../js/include.js"></script>
	<script src="../assets/js/jquery.cookie.js"></script>
</body>
</html>
